<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .wrap{
            position: absolute;
            left: 0;
            right: 0;
            background: rgba(147, 147, 147,.8);
            width: 100%;
            height: 100%;
        }
        .index{
            margin-left: 10rem;
            margin-top: 24rem;
            width: 355rem;
            height: 633rem;
            background: #fff;
            border-radius: 10rem;
            overflow-x: hidden;
        overflow-y: scroll;
        }
        .mar-left{
            margin-left: 16rem;
            margin-right: 16rem;
        }
        .mart{
            margin-top: 10rem;
        }
        .mart-20{
            margin-top: 20rem;
        }
        .flex{
            display: flex;
            justify-content: space-between;
        }
        .flex-no{
            flex-direction: column;
        }
        .tc1{
            width: 218rem;
            height: 128rem;
        }
        .tc2{
            width: 92rem;
            height: 130rem;
        }
        .tc3{
            width: 92rem;
            height: 83rem;
        }
        .tc4{
            width: 92rem;
            height: 83rem;
        }
        .tc5{
            width: 218rem;
            height: 177rem;
        }
        .tc6{
            margin-bottoms: 13rem;
            width: 218rem;
            height: 82rem;
        }
        .tc7{
            margin-bottom: 13rem;
            width: 92rem;
            height: 82rem;
        }
        .flex-w{
            flex-wrap: wrap;
        }
        .flex-row-reverse{
            flex-direction: row-reverse;
        }
    </style>
    <script>
        !function(n){
            var  e=n.document,
            t=e.documentElement,
            i=37500,
            d=i/100,
            o="orientationchange"in n?"orientationchange":"resize",
            a=function(){
                var n=t.clientWidth||320;n>720&&(n=720);
                t.style.fontSize=n/d+"px"
            };
            e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
        }(window);
        </script>
</head>
<body>
    <div id="app">
        <div class="wrap">
            <div class="index ">
                <div class="mar-left " style="padding-top: 50rem;padding-bottom: 50rem">
                    <div class="flex">
                        <img src="__CDN__/assets/images/图层 1@2x.png" class="tc1">
                        <img src="__CDN__/assets/images/图层 2@2x.png" class="tc2">
                    </div>
                    <div class="flex mart">
                        <div class="flex flex-no">
                            <img src="__CDN__/assets/images/图层 4@2x.png" class="tc3">
                            <img src="../images/图层 4@2x.png" class="tc4">
                        </div>
                        <img src="__CDN__/assets/images/图层 9@2x.png" class="tc5">
                    </div>
                </div>
                <div class=" mar-left flex flex-w " >
                        <img :src="item.url" :class="{tc6:index%2==0,tc7:index%2!=0}" v-for="(item,index) in list">
                </div>
            </div>
        </div>
    </div>
    
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
        new Vue({
            el: '#app',
            data() {
                return  {
                    list:[
                        {url:'__CDN__/assets/images/图层 8@2x.png'},
                        {url:'__CDN__/assets/images/图层 10@2x.png'},
                        {url:'__CDN__/assets/images/图层 8@2x.png'},
                        {url:'__CDN__/assets/images/图层 10@2x.png'},
                        {url:'__CDN__/assets/images/图层 8@2x.png'},
                        {url:'__CDN__/assets/images/图层 10@2x.png'},
                    ],
                }
                
            },
            mounted(){
                $.ajax({
                //请求方式
                type : "GET",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : "http://app.aebrowser.cn/api/v1.ads/first",
                dataType:'jsonp',
                //数据，json字符串
                data : {
                    page:'1'
                },
                //请求成功
                success : function(result) {
                    console.log(result);
                }
            });
            },
            methods:{
                
            }
        })

</script>
</html>